<template>
    <div>
        <el-select v-bind="$attrs" filterable remote :remote-method="remoteMethod" :loading="loading"
            remote-show-suffix>
            <el-option v-for="item in options" :key="item.id" :label="item.roleName" :value="item.id" />
        </el-select>
    </div>
</template>
<script setup>
import { getAllRole } from '@/api/manage/users-manager/roles-manager/index';

const props = defineProps({
    unityId: {
        type: Number || String,
        default: null
    }
})
const options = ref([])
const list = ref([])
const loading = ref(false)
watch(() => props.unityId, () => {
    getAllRole({ unityId: props.unityId }).then(res => {
        list.value = res.result
        options.value = list.value
    })
}, {
    immediate: true,
    deep: true
})

const remoteMethod = (query) => {
    if (query) {
        loading.value = true
        setTimeout(() => {
            loading.value = false
            options.value = list.value.filter((item) => {
                return item.roleName.includes(query)
            })
        }, 200)
    } else {
        options.value = list.value
    }
}
</script>
<style lang="scss" scoped></style>